﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery随机点名中奖后放烟花动画特效</title>

<style>
*{margin:0;padding:0; font-family:"微软雅黑";}
.box{
	width:80vw;
	margin:0 auto;
	background:#EFEFEF;
	position: absolute;
	/*left: 0;*/
	left: calc(50% - 40vw);   /*水平居中*/
	top: 0;
}
#name{
	padding:60px;
	font-size:40px;
	font-weight:900;
	text-align:center;
	background:url(images/6.jpg) no-repeat center;
	/*以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉*/
	-webkit-background-clip:text;   
	-webkit-text-fill-color:transparent;  /*文字颜色填充*/
}
h1{
	letter-spacing:3px;
	height:70px;
	line-height:70px;
	background:#ccc;
	text-align:center;
	-webkit-text-stroke:1px #000;   /*字体描边*/
	-webkit-text-fill-color:transparent;/*谷歌内核特有的属性*/
}
#bt{
	height:50px;
	line-height:50px;
	background:deepskyblue;
	text-align:center;
	color:#fff;
	cursor:pointer;
}
#canvas{
	display:none;
}
</style>

</head>
<body id="bodyid">

<canvas id="canvas"></canvas>
<div class="box">
	<h1>金榜题名</h1>
	<div id="name">张三</div>
	<div id="bt" onclick="doit()">开始点名</div>
</div>
 <script src="js/jquery.min.js"></script>

<script>
 $(function() {
var canvas = $('#canvas')[0];
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext('2d');

// resize
$(window).on('resize', function() {
	canvas.width = $(window).width();
	canvas.height = $(window).height();
	ctx.fillStyle = '#000';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
});

// init
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// objects
var listFire = [];
var listFirework = [];
var fireNumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 1.5 };
var range = 100;
for (var i = 0; i < fireNumber; i++) {
	var fire = {
		x: Math.random() * range / 2 - range / 4 + center.x,
		y: Math.random() * range * 2 + canvas.height,
		size: Math.random() + 0.5,
		fill: '#fd1',
		vx: Math.random() - 0.5,
		vy: -(Math.random() + 4),
		ax: Math.random() * 0.02 - 0.01,
		far: Math.random() * range + (center.y - range)
	};
	fire.base = {
		x: fire.x,
		y: fire.y,
		vx: fire.vx
	};
	//
	listFire.push(fire);
}

function randColor() {
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	var color = 'rgb($r, $g, $b)';
	color = color.replace('$r', r);
	color = color.replace('$g', g);
	color = color.replace('$b', b);
	return color;
}

(function loop() {
	requestAnimationFrame(loop);
	update();
	draw();
})();


function update() {
	for (var i = 0; i < listFire.length; i++) {
		var fire = listFire[i];
		//
		if (fire.y <= fire.far) {
			// case add firework
			var color = randColor();
			for (var i = 0; i < fireNumber * 5; i++) {
				var firework = {
					x: fire.x,
					y: fire.y,
					size: Math.random() + 1.5,
					fill: color,
					vx: Math.random() * 5 - 2.5,
					vy: Math.random() * -5 + 1.5,
					ay: 0.05,
					alpha: 1,
					life: Math.round(Math.random() * range / 2) + range / 2
				};
				firework.base = {
					life: firework.life,
					size: firework.size
				};
				listFirework.push(firework);
			}
			// reset
			fire.y = fire.base.y;
			fire.x = fire.base.x;
			fire.vx = fire.base.vx;
			fire.ax = Math.random() * 0.02 - 0.01;
		}
		//
		fire.x += fire.vx;
		fire.y += fire.vy;
		fire.vx += fire.ax;
	}

	for (var i = listFirework.length - 1; i >= 0; i--) {
		var firework = listFirework[i];
		if (firework) {
			firework.x += firework.vx;
			firework.y += firework.vy;
			firework.vy += firework.ay;
			firework.alpha = firework.life / firework.base.life;
			firework.size = firework.alpha * firework.base.size;
			firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
			//
			firework.life--;
			if (firework.life <= 0) {
				listFirework.splice(i, 1);
			}
		}
	}
}

function draw() {
	// clear
	ctx.globalCompositeOperation = 'source-over';
	ctx.globalAlpha = 0.18;
	ctx.fillStyle = '#000';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// re-draw
	ctx.globalCompositeOperation = 'screen';
	ctx.globalAlpha = 1;
	for (var i = 0; i < listFire.length; i++) {
		var fire = listFire[i];
		ctx.beginPath();
		ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
		ctx.closePath();
		ctx.fillStyle = fire.fill;
		ctx.fill();
	}

	for (var i = 0; i < listFirework.length; i++) {
		var firework = listFirework[i];
		ctx.globalAlpha = firework.alpha;
		ctx.beginPath();
		ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
		ctx.closePath();
		ctx.fillStyle = firework.fill;
		ctx.fill();
	}
}
});
 //点名事件
var id = document.getElementById('canvas');

var namelist=["李四","王五","二二","一一","三三"];
var mytime=null;
function doit(){
	var bt = document.getElementById("bt");
	if(mytime==null)
	{
		bt.innerHTML = "停止点名";
		bt.style.background = 'palevioletred';
		id.style.display = 'none'
		//随机点名
		show();//定义一个方法
	}else{
		bt.innerHTML = "开始点名";
		bt.style.background = "deepskyblue";
		clearTimeout(mytime);
		mytime = null;
		id.style.display = 'block'
		
	}

}
/*Math.floor 向下取整(-16.2就为-17)，去除小数*/
function show(){
	var name = document.getElementById("name");
	var num=Math.floor(Math.random()*namelist.length);
	name.innerHTML = namelist[num];
	mytime = setTimeout(show,80);
}
</script>

</body>
</html>